<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="流程用户">
        <el-select
          v-model="queryParams.user"
          size="small"
          style="width: 240px" @change="handleUserChange">
          <el-option
            v-for="item in userOptions"
            :key="item.user"
            :label="item.userName"
            :value="item.user">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="清单编号" prop="boqCode">
        <el-input
          v-model="queryParams.boqCode"
          placeholder="请输入清单编号"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="清单名称" prop="boqName">
        <el-input
          v-model="queryParams.boqName"
          placeholder="请输入清单名称"
          clearable
          size="small"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery(true)">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleTabClick">

        <el-tab-pane label="合同计量" name="contract">

          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="openSelectContractMeterage"
                v-if="editFlag"
                v-hasPermi="['engineering:meterage:detail:add']"
              >新增</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="warning"
                plain
                icon="el-icon-document-copy"
                size="mini"
                :disabled="contractSingle"
                @click="handleCopy"
                v-if="editFlag"
                v-hasPermi="['engineering:meterage:detail:add']"
              >复制</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="el-icon-edit"
                size="mini"
                :disabled="contractSingle"
                @click="handleUpdateContract"
                v-if="editFlag"
                v-hasPermi="['engineering:meterage:detail:edit']"
              >修改</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="contractMultiple"
                @click="handleDeleteContract"
                v-if="editFlag"
                v-hasPermi="['engineering:meterage:detail:remove']"
              >删除</el-button>
            </el-col>

          </el-row>


          <el-table v-loading="loading" :data="detailContractList"
                    @selection-change="handleSelectionContractChange" >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="清单编号" align="left" prop="boqCode" width="100" />
            <el-table-column label="清单名称" align="left" prop="boqName" width="150" show-overflow-tooltip  />
            <el-table-column label="起始桩号" align="center" prop="beginStation" />
            <el-table-column label="终止桩号" align="center" prop="endStation" />
            <el-table-column label="单位" align="center" prop="unit" />
            <el-table-column label="单价" align="center" prop="price" />
            <el-table-column label="合同数量" align="center" prop="contractAmount" />
            <el-table-column label="已计量数量" align="center" prop="alreadyAmount" />
            <el-table-column label="本次计量数量" align="center" prop="amount" >
              <template slot-scope="scope">
                <span v-if="scope.row.isEdit == 'N'">{{scope.row.amount}}</span>
                <span v-else style="color: red;">{{scope.row.amount}}</span>
              </template>
            </el-table-column>
            <el-table-column label="本次计量金额" align="center" prop="total" />
            <el-table-column
              label="操作"
              align="center"
              width="160"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-search"
                  @click="handleViewContract(scope.row)"
                >预览</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdateContract(scope.row)"
                  v-if="editFlag"
                  v-hasPermi="['engineering:meterage:detail:edit']"
                >修改</el-button>
              </template>
            </el-table-column>
            <el-table-column label="草图" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  icon="el-icon-picture"
                  type="primary"
                  size="small"
                  @click="handleSketch(scope.row, 0)"
                  v-if="scope.row.hasSketch == 'Y'"
                >
                </el-button>
                <el-button
                  icon="el-icon-picture-outline"
                  size="small"
                  @click="handleSketch(scope.row, 0)"
                  v-else
                >
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="附件" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  icon="el-icon-picture"
                  type="primary"
                  size="small"
                  @click="handleAnnex(scope.row, 0)"
                  v-if="scope.row.hasAnnex == 'Y'"
                >
                </el-button>
                <el-button
                  icon="el-icon-picture-outline"
                  size="small"
                  @click="handleAnnex(scope.row, 0)"
                  v-else
                >
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination style="padding-top: 100px;"
            v-show="contractTotal > 0"
            :total="contractTotal"
            :page.sync="contractQueryParams.pageNum"
            :limit.sync="contractQueryParams.pageSize"
            @pagination="getContractList"
          />

          <!-- 修改工程计量合同清单详情 -->
          <el-dialog :title="contractTitle" :visible.sync="contractOpen" :close-on-click-modal="false" width="750px" append-to-body>
            <el-form ref="contractForm" :model="contractForm" :rules="contractRules" label-width="80px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="清单编号" prop="boqCode">
                    <el-input v-model="contractForm.boqCode" placeholder="请输入清单编号" :readonly="true" :style="{width: '100%'}">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="清单名称" prop="boqName">
                    <el-input v-model="contractForm.boqName" placeholder="请输入清单名称" :readonly="true" :style="{width: '100%'}">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="单　　价" prop="price">
                    <el-input v-model="contractForm.price" type="number" :style="{width: '100%'}" :readonly="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="total">
                        <span slot="label">
                          金　　额
                          <el-tooltip :content=this.contentTotal placement="top">
                            <i class="el-icon-question"></i>
                          </el-tooltip>
                        </span>
                    <el-input v-model="contractForm.total" type="number" @keydown.native="handleKey" :style="{width: '100%'}" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item prop="amount">
                        <span slot="label">
                          数　　量
                          <el-tooltip :content=this.contentAmount placement="top">
                          <i class="el-icon-question"></i>
                          </el-tooltip>
                        </span>
                    <el-input v-model="contractForm.amount" @input="contractAmountInput(contractForm)" type="number" @keydown.native="handleKey" placeholder="请输入数量" clearable :style="{width: '100%'}" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="完　　成" prop="complete">
                    <el-switch
                      v-model="contractForm.complete"
                      active-value="Y"
                      inactive-value="N" @change="completeContractChange(contractForm.complete)">
                    </el-switch>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="起始桩号" prop="beginStation">
                    <el-input v-model="contractForm.beginStation" placeholder="请输入起始桩号" clearable :style="{width: '100%'}">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="终止桩号" prop="endStation">
                    <el-input v-model="contractForm.endStation" placeholder="请输入终止桩号" clearable :style="{width: '100%'}">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="图册图号" prop="blueprint">
                    <el-input v-model="contractForm.blueprint" type="textarea" placeholder="请输入图册图号"
                              :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="证书号" prop="certificateNo">
                    <el-input v-model="contractForm.certificateNo" type="textarea" placeholder="请输入证书号"
                              :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="分部工程" prop="place">
                    <el-input v-model="contractForm.place" type="textarea" placeholder="请输入分部工程"
                              :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="分项工程" prop="item">
                    <el-input v-model="contractForm.item" type="textarea" placeholder="请输入分项工程"
                              :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="计算式" prop="formula">
                    <el-input v-model="contractForm.formula" type="textarea" placeholder="请输入计算式"
                              :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="contractSubmitForm">确 定</el-button>
              <el-button @click="contractCancel">取 消</el-button>
            </div>

          </el-dialog>

          <!-- 工程量清单复制 -->
          <el-dialog :title="copyTitle" :visible.sync="copyOpen" :close-on-click-modal="false" width="500px" append-to-body>

            <el-form ref="copyForm" :model="copyForm" :rules="copyRules" label-width="80px">
              <el-form-item label="数量" prop="amount">
                <el-input-number v-model="copyForm.amount" :min="1" :max="10" style="width: 100%" />
              </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="copySubmitForm">确 定</el-button>
              <el-button @click="copyCancel">取 消</el-button>
            </div>

          </el-dialog>

          <!-- 预览工程计量合同清单详情 -->
          <el-dialog :title="contractBrowseTitle" :visible.sync="contractBrowseOpen" :close-on-click-modal="false" width="750px" append-to-body>

            <el-form ref="contractForm" :model="contractForm" :rules="contractRules" label-width="80px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="清单编号" prop="boqCode">
                    <el-input v-model="contractForm.boqCode" placeholder="请输入清单编号" :readonly="true" :style="{width: '100%'}">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="清单名称" prop="boqName">
                    <el-input v-model="contractForm.boqName" placeholder="请输入清单名称" :readonly="true" :style="{width: '100%'}">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="单　　价" prop="price">
                    <el-input v-model="contractForm.price" type="number" :readonly="true" :style="{width: '100%'}" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="total">
                        <span slot="label">
                          金　　额
                          <el-tooltip :content=this.contentTotal placement="top">
                            <i class="el-icon-question"></i>
                          </el-tooltip>
                        </span>
                    <el-input v-model="contractForm.total" type="number" :readonly="true" :style="{width: '100%'}" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item prop="amount">
                        <span slot="label">
                          数　　量
                          <el-tooltip :content=this.contentAmount placement="top">
                          <i class="el-icon-question"></i>
                          </el-tooltip>
                        </span>
                    <el-input v-model="contractForm.amount" :readonly="true" type="number"  :style="{width: '100%'}" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="完　　成" prop="complete">
                    <el-switch
                      v-model="contractForm.complete"
                      active-value="Y"
                      inactive-value="N" :readonly="true">
                    </el-switch>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="起始桩号" prop="beginStation">
                    <el-input v-model="contractForm.beginStation" :readonly="true" :style="{width: '100%'}">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="终止桩号" prop="endStation">
                    <el-input v-model="contractForm.endStation" :readonly="true" :style="{width: '100%'}">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="图册图号" prop="blueprint">
                    <el-input v-model="contractForm.blueprint" type="textarea" :readonly="true"
                              :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="证书号" prop="certificateNo">
                    <el-input v-model="contractForm.certificateNo" type="textarea" :readonly="true"
                              :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="分部工程" prop="place">
                    <el-input v-model="contractForm.place" type="textarea" :readonly="true"
                              :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="分项工程" prop="item">
                    <el-input v-model="contractForm.item" type="textarea" :readonly="true"
                              :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="计算式" prop="formula">
                    <el-input v-model="contractForm.formula" type="textarea" :readonly="true"
                              :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer">
              <el-button @click="contractBrowseOpen=false">取 消</el-button>
            </div>

          </el-dialog>

        </el-tab-pane>

        <el-tab-pane label="变更计量" name="change">

          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="openSelectChangeMeterage"
                v-if="editFlag"
                v-hasPermi="['engineering:meterage:detail:add']"
              >新增</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="el-icon-edit"
                size="mini"
                :disabled="changeSingle"
                @click="handleUpdateChange"
                v-if="editFlag"
                v-hasPermi="['engineering:meterage:detail:edit']"
              >修改</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="changeMultiple"
                @click="handleDeleteChange"
                v-if="editFlag"
                v-hasPermi="['engineering:meterage:detail:remove']"
              >删除</el-button>
            </el-col>
          </el-row>

          <el-table v-loading="loading" :data="detailChangeList" @selection-change="handleSelectionChangeChange" >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="清单编号" align="left" prop="boqCode" width="100" />
            <el-table-column label="清单名称" align="left" prop="boqName" width="150" show-overflow-tooltip  />
            <el-table-column label="起始桩号" align="center" prop="beginStation" />
            <el-table-column label="终止桩号" align="center" prop="endStation" />
            <el-table-column label="单位" align="center" prop="unit" />
            <el-table-column label="单价" align="center" prop="price" />
            <el-table-column label="合同数量" align="center" prop="contractAmount" />
            <el-table-column label="已计量数量" align="center" prop="alreadyAmount" />
            <el-table-column label="本次计量数量" align="center" prop="amount" >
              <template slot-scope="scope">
                <span v-if="scope.row.isEdit == 'N'">{{scope.row.amount}}</span>
                <span v-else style="color: red;">{{scope.row.amount}}</span>
              </template>
            </el-table-column>
            <el-table-column label="本次计量金额" align="center" prop="total" />
            <el-table-column
              label="操作"
              align="center"
              width="160"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-search"
                  @click="handleViewChange(scope.row)"
                >预览</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdateChange(scope.row)"
                  v-if="editFlag"
                  v-hasPermi="['engineering:meterage:detail:edit']"
                >修改</el-button>
              </template>
            </el-table-column>
            <el-table-column label="草图" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  icon="el-icon-picture"
                  type="primary"
                  size="small"
                  @click="handleSketch(scope.row, 1)"
                  v-if="scope.row.hasSketch == 'Y'"
                >
                </el-button>
                <el-button
                  icon="el-icon-picture-outline"
                  size="small"
                  @click="handleSketch(scope.row, 1)"
                  v-else
                >
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="附件" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  icon="el-icon-picture"
                  type="primary"
                  size="small"
                  @click="handleAnnex(scope.row, 1)"
                  v-if="scope.row.hasAnnex == 'Y'"
                >
                </el-button>
                <el-button
                  icon="el-icon-picture-outline"
                  size="small"
                  @click="handleAnnex(scope.row, 1)"
                  v-else
                >
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="changeTotal > 0"
            :total="changeTotal"
            :page.sync="changeQueryParams.pageNum"
            :limit.sync="changeQueryParams.pageSize"
            @pagination="getChangeList"
          />

          <!-- 修改工程计量变更清单详情对话框 -->
          <el-dialog :title="changeTitle" :visible.sync="changeOpen" :close-on-click-modal="false" width="750px" append-to-body>

            <el-form ref="changeForm" :model="changeForm" :rules="changeRules" label-width="80px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="清单编号" prop="boqCode">
                    <el-input v-model="changeForm.boqCode" placeholder="请输入清单编号" :readonly="true" :style="{width: '100%'}">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="清单名称" prop="boqName">
                    <el-input v-model="changeForm.boqName" placeholder="请输入清单名称" :readonly="true" :style="{width: '100%'}">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="单　　价" prop="price">
                    <el-input v-model="changeForm.price" type="number" :style="{width: '100%'}" :readonly="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="total">
                        <span slot="label">
                          金　　额
                          <el-tooltip :content=this.contentTotal placement="top">
                            <i class="el-icon-question"></i>
                          </el-tooltip>
                        </span>
                    <el-input v-model="changeForm.total" type="number" @keydown.native="handleKey" :style="{width: '100%'}" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item prop="amount">
                        <span slot="label">
                          数　　量
                          <el-tooltip :content=this.contentAmount placement="top">
                          <i class="el-icon-question"></i>
                          </el-tooltip>
                        </span>
                    <el-input v-model="changeForm.amount" @input="changeAmountInput(changeForm)" type="number" @keydown.native="handleKey" placeholder="请输入数量" clearable :style="{width: '100%'}" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="完　　成" prop="complete">
                    <el-switch
                      v-model="changeForm.complete"
                      active-value="Y"
                      inactive-value="N" @change="completeChangeChange(changeForm.complete)">
                    </el-switch>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="起始桩号" prop="beginStation">
                    <el-input v-model="changeForm.beginStation" placeholder="请输入起始桩号" clearable :style="{width: '100%'}">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="终止桩号" prop="endStation">
                    <el-input v-model="changeForm.endStation" placeholder="请输入终止桩号" clearable :style="{width: '100%'}">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="图册图号" prop="blueprint">
                    <el-input v-model="changeForm.blueprint" type="textarea" placeholder="请输入图册图号"
                              :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="证书号" prop="certificateNo">
                    <el-input v-model="changeForm.certificateNo" type="textarea" placeholder="请输入证书号"
                              :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="分部工程" prop="place">
                    <el-input v-model="changeForm.place" type="textarea" placeholder="请输入分部工程"
                              :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="分项工程" prop="item">
                    <el-input v-model="changeForm.item" type="textarea" placeholder="请输入分项工程"
                              :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="计算式" prop="formula">
                    <el-input v-model="changeForm.formula" type="textarea" placeholder="请输入计算式"
                              :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="changeSubmitForm">确 定</el-button>
              <el-button @click="changeCancel">取 消</el-button>
            </div>

          </el-dialog>

          <!-- 预览工程计量变更清单详情对话框 -->
          <el-dialog :title="changeBrowseTitle" :visible.sync="changeBrowseOpen" :close-on-click-modal="false" width="750px" append-to-body>

            <el-row :gutter="15">
              <el-form ref="changeForm" :model="changeForm" :rules="changeRules" label-width="80px">

                <el-col :span="24">
                  <el-row type="flex" justify="start" align="top" :gutter="15">
                    <el-col :span="24">
                      <el-form-item label="清单编号">
                        <el-input v-model="changeForm.boqCode" :readonly="true" :style="{width: '100%'}">
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>

                <el-col :span="24">
                  <el-row :gutter="15">
                    <el-col :span="24">
                      <el-form-item label="清单名称">
                        <el-input v-model="changeForm.boqName" :readonly="true" :style="{width: '100%'}">
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>

                <el-col :span="12">
                  <el-row :gutter="15">

                    <el-col :span="24">
                      <el-form-item label="数量">
                        <el-input v-model="changeForm.amount" type="number" :readonly="true" :style="{width: '100%'}" />
                      </el-form-item>
                    </el-col>

                    <el-col :span="24">
                      <el-form-item label="金额">
                        <el-input v-model="changeForm.total" type="number" :readonly="true" :style="{width: '100%'}" />
                      </el-form-item>
                    </el-col>

                    <el-col :span="24">
                      <el-form-item label="起始桩号">
                        <el-input v-model="changeForm.beginStation" :readonly="true" :style="{width: '100%'}">
                        </el-input>
                      </el-form-item>
                    </el-col>

                    <el-col :span="24">
                      <el-form-item label="图号">
                        <el-input v-model="changeForm.blueprint" :readonly="true" :style="{width: '100%'}">
                        </el-input>
                      </el-form-item>
                    </el-col>

                    <el-col :span="24">
                      <el-form-item label="详细部位">
                        <el-input v-model="changeForm.place" type="textarea" :readonly="true"
                                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
                      </el-form-item>
                    </el-col>

                  </el-row>
                </el-col>

                <el-col :span="12">
                  <el-row :gutter="15">

                    <el-col :span="24">
                      <el-form-item label="终止桩号">
                        <el-input v-model="changeForm.endStation" :readonly="true" :style="{width: '100%'}">
                        </el-input>
                      </el-form-item>
                    </el-col>

                    <el-col :span="24">
                      <el-form-item label="证书号">
                        <el-input v-model="changeForm.certificateNo" :readonly="true" :style="{width: '100%'}" />
                      </el-form-item>
                    </el-col>

                    <el-col :span="24">
                      <el-form-item label="计算式">
                        <el-input v-model="changeForm.formula" type="textarea" :readonly="true"
                                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
                      </el-form-item>
                    </el-col>

                  </el-row>
                </el-col>

              </el-form>

            </el-row>

            <div slot="footer" class="dialog-footer">
              <el-button @click="changeBrowseOpen=false">取 消</el-button>
            </div>

          </el-dialog>

        </el-tab-pane>

        <el-tab-pane label="其他支付项目" name="other">

          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-refresh"
                size="mini"
                @click="handleSyncItem"
                v-if="editFlag"
                v-hasPermi="['engineering:meterage:detail:add']"
              >同步支付项目</el-button>
            </el-col>
          </el-row>

          <el-table v-loading="loading" :row-style="{height: '0'}" :data="detailOtherList" @selection-change="handleSelectionOtherChange" >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="支付项目名称" align="left" prop="itemName" width="200"  show-overflow-tooltip />
            <el-table-column label="支付金额" align="center" prop="total" width="200">
              <template slot-scope="scope">
                <span v-if="scope.row.isEdit == 'N'">{{scope.row.total}}</span>
                <span v-else style="color: red;">{{scope.row.total}}</span>
              </template>
            </el-table-column>

            <el-table-column label="备注信息" align="center" prop="remark" />

            <el-table-column
              label="操作"
              align="center"
              width="160"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdateOther(scope.row)"
                  v-if="editFlag"
                  v-hasPermi="['engineering:meterage:detail:edit']"
                >修改</el-button>

              </template>
            </el-table-column>

            <el-table-column label="附件" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  icon="el-icon-picture"
                  type="primary"
                  size="small"
                  @click="handleAnnex(scope.row, 2)"
                  v-if="scope.row.hasAnnex == 'Y'"
                >
                </el-button>
                <el-button
                  icon="el-icon-picture-outline"
                  size="small"
                  @click="handleAnnex(scope.row, 2)"
                  v-else
                >
                </el-button>
              </template>
            </el-table-column>

          </el-table>

          <pagination
            v-show="otherTotal > 0"
            :total="otherTotal"
            :page.sync="otherQueryParams.pageNum"
            :limit.sync="otherQueryParams.pageSize"
            @pagination="getOtherList"
          />

          <!-- 修改工程计量其他支付项目详情对话框 -->
          <el-dialog :title="otherTitle" :visible.sync="otherOpen" :close-on-click-modal="false" width="600px" append-to-body>

            <el-form ref="otherForm" :model="otherForm" :rules="otherRules" label-width="80px">

              <el-form-item label="名　　称" prop="itemName">
                <el-input v-model="otherForm.itemName" :readonly="true" />
              </el-form-item>

              <el-form-item label="金　　额" prop="total">
                <el-input v-model="otherForm.total" type="number" @keydown.native="handleKey" placeholder="请输入金额" clearable :style="{width: '100%'}" />
              </el-form-item>

              <el-form-item label="备　　注" prop="remark">
                <el-input v-model="otherForm.remark" type="textarea" placeholder="请输入备注信息" :style="{width: '100%'}"></el-input>
              </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="otherSubmitForm">确 定</el-button>
              <el-button @click="otherCancel">取 消</el-button>
            </div>

          </el-dialog>

        </el-tab-pane>
        <el-tab-pane label="填报说明" name="explain" v-if="checkPermi(['engineering:meterage:detail:explain'])">
          <el-form ref="explainForm" :model="explain.form" :rules="explain.rules" label-width="80px">
            <el-form-item label="事　　由" prop="reason">
              <el-input v-model="explain.form.reason" type="textarea" placeholder="请输入事由" :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="通知内容" prop="content">
              <el-input v-model="explain.form.content" type="textarea" placeholder="请输入通知内容" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-form>
          <div style="padding-left: 40%">
            <el-button size="small" type="primary" v-if="editFlag" v-hasPermi="['engineering:meterage:detail:edit']" @click="explainSubmitForm">保存</el-button>
            <el-button size="small" type="warning" v-if="editFlag" v-hasPermi="['engineering:meterage:detail:edit']" @click="explainCancel">重置</el-button>
          </div>
        </el-tab-pane>
<!--        <el-tab-pane label="数据预览" name="browse">-->
<!--          数据预览-->
<!--        </el-tab-pane>-->
      </el-tabs>
    </el-card>


    <select-contract-meterage ref="selectContract" :masterId="queryParams.masterId" @ok="handleQuery(false)"></select-contract-meterage>
    <select-change-meterage ref="selectChange" :masterId="queryParams.masterId" @ok="handleQuery(false)"></select-change-meterage>

    <sketch ref="sketch"></sketch>

    <annex ref="annex"></annex>

  </div>
</template>

<script>
  import {
    selectUserOptions,
    listDetailContract, getDetailContract, updateDetailContract, delDetailContract,
    listDetailChange, getDetailChange, updateDetailChange, delDetailChange,
    listDetailOther, getDetailOther, updateDetailOther, syncDetailItem, copy, getDetailExplain, updateDetailExplain
  } from "@/api/engineering/meterageDetail";
  import { getDecimalPlace } from "@/api/engineering/meterage";
  import selectContractMeterage from "@/views/engineering/meterage/contract/selectContractMeterage";
  import selectChangeMeterage from "@/views/engineering/meterage/change/selectChangeMeterage";
  import sketch from "@/views/engineering/meterage/common/sketch";
  import annex from "@/views/engineering/meterage/common/annex";
  import * as math from "mathjs";
  import { checkPermi } from "@/utils/permission";

export default {
  name: "MeterageDetail",
  components: { selectContractMeterage, selectChangeMeterage, sketch, annex },
  data() {
    return {
      activeName: "contract",
      // 不能编辑的原因
      // 1.该数据未锁定
      // 2.该数据的当前用户不等于登录用户
      // 3.选择用户不等于登录用户
      editFlag: true,
      // 主表状态
      status: null,
      // 当前登录用户
      loginUser: null,
      // 当前流程所在用户
      currentUser: null,
      // 选择用户
      selectUserName: null,
      // 用户下拉框
      userOptions: [],
      // 小数点位数
      decimalPlace: 0,
      // 是否可以超计量
      ultraMeasure: "N",
      // 遮罩层
      loading: false,
      // 导出遮罩层
      exportLoading: false,
      // 非单个禁用
      contractSingle: true,
      changeSingle: true,
      otherSingle: true,
      // 非多个禁用
      contractMultiple: true,
      changeMultiple: true,
      otherMultiple: true,
      // 选中数组
      contractIds: [],
      changeIds: [],
      otherIds: [],
      // 显示搜索条件
      showSearch: true,
      // 合同清单表格数据
      detailContractList: [],
      contractTotal: 0,
      // 变更清单表格数据
      detailChangeList: [],
      changeTotal: 0,
      // 其他支付项目表格数据
      detailOtherList: [],
      otherTotal: 0,
      // 弹出层标题
      contractTitle: "",
      copyTitle: "",
      changeTitle: "",
      otherTitle: "",
      contractBrowseTitle: "",
      changeBrowseTitle: "",
      // 是否显示弹出层
      contractOpen: false,
      copyOpen: false,
      contractBrowseOpen: false,
      changeOpen: false,
      changeBrowseOpen: false,
      otherOpen: false,
      // 保存修改前的数量
      beforeUpdateAmount: 0,
      beforeUpdateTotal: 0,
      contentAmount: "",
      contentTotal: "",
      // 查询参数
      queryParams: {
        masterId: null,
        user: null,
        boqCode: null,
        boqName: null,
      },
      contractQueryParams: {
        pageNum: 1,
        pageSize: 10,
        masterId: null,
        user: null,
        boqCode: null,
        boqName: null,
      },
      changeQueryParams: {
        pageNum: 1,
        pageSize: 10,
        masterId: null,
        user: null,
        boqCode: null,
        boqName: null,
      },
      otherQueryParams: {
        pageNum: 1,
        pageSize: 10,
        masterId: null,
        user: null,
        itemCode: null,
        itemName: null,
      },
      // 计量清单
      meterage: null,
      // 表单参数
      contractForm: {
      },
      changeForm: {
      },
      otherForm: {
      },
      copyForm: {},
      // 表单校验
      contractRules: {
        amount: [
          { required: true, message: "数量不能为空", trigger: "blur" }
        ],
        total: [
          { required: true, message: "金额不能为空", trigger: "blur" }
        ],
        beginStation: [
          { max: 50, message: '起始桩号最大长度为50个字符', trigger: 'blur'}
        ],
        endStation: [
          { max: 50, message: '终止桩号最大长度为50个字符', trigger: 'blur'}
        ],
        blueprint: [
          { max: 128, message: '终止桩号最大长度为128个字符', trigger: 'blur'}
        ],
        certificateNo: [
          { max: 128, message: '交工证书号最大长度为128个字符', trigger: 'blur'}
        ],
        place: [
          { max: 255, message: '详细部位最大长度为255个字符', trigger: 'blur'}
        ],
        formula: [
          { max: 500, message: '计算式最大长度为500个字符', trigger: 'blur'}
        ]
      },
      changeRules: {
        amount: [
          { required: true, message: "数量不能为空", trigger: "blur" }
        ],
        total: [
          { required: true, message: "金额不能为空", trigger: "blur" }
        ],
        beginStation: [
          { max: 50, message: '起始桩号最大长度为50个字符', trigger: 'blur'}
        ],
        endStation: [
          { max: 50, message: '终止桩号最大长度为50个字符', trigger: 'blur'}
        ],
        blueprint: [
          { max: 128, message: '终止桩号最大长度为128个字符', trigger: 'blur'}
        ],
        certificateNo: [
          { max: 128, message: '交工证书号最大长度为128个字符', trigger: 'blur'}
        ],
        place: [
          { max: 255, message: '详细部位最大长度为255个字符', trigger: 'blur'}
        ],
        formula: [
          { max: 500, message: '计算式最大长度为500个字符', trigger: 'blur'}
        ]
      },
      otherRules: {
        total: [
          { required: true, message: "金额不能为空", trigger: "blur" }
        ],
        remark: [
          { max: 500, message: '备注信息最大长度为500个字符', trigger: 'blur'}
        ]
      },
      copyRules: {
        amount: [
          { required: true, message: "数量不能为空", trigger: "blur" }
        ],
      },
      explain: {
        queryParams: {
          masterId: null,
          user: null,
        },
        form: {},
        rules: {
          reason: [
            { required: true, message: "事由不能为空", trigger: "blur" },
            { max: 2000, message: '事由最大长度为2000个字符', trigger: 'blur'}
          ],
          content: [
            { required: true, message: "通知内容不能为空", trigger: "blur" },
            { max: 2000, message: '通知内容最大长度为2000个字符', trigger: 'blur'}
          ],
        }
      }
    };
  },
  created() {
    this.loginUser = this.$store.state.user.name;
    this.queryParams.masterId = this.$route.query.masterId;
    this.contractQueryParams.masterId = this.$route.query.masterId;
    this.changeQueryParams.masterId = this.$route.query.masterId;
    this.otherQueryParams.masterId = this.$route.query.masterId;
    this.explain.queryParams.masterId = this.$route.query.masterId;
    this.status = this.$route.query.status;
    this.selectUserOptions();
    this.getDecimalPlace();
  },
  methods: {
    checkPermi,
    handleTabClick() {
      this.resetQueryParam();
      this.choiceList(true);
    },
    // 选择加载的列表
    choiceList(flag) {
      if (flag) {
        this.contractQueryParams.pageNum = 1;
        this.changeQueryParams.pageNum = 1;
        this.otherQueryParams.pageNum = 1;
      }
      if (this.activeName == "contract") {
        this.getContractList();
      } else if (this.activeName == "change") {
        this.getChangeList();
      } else if (this.activeName == "other") {
        this.getOtherList();
      } else if (this.activeName == "explain") {
        this.getExplain();
      }
    },
    /** 获取小数点位数 */
    getDecimalPlace() {
      getDecimalPlace(this.queryParams.masterId).then(response => {
        this.decimalPlace = response.decimalPlace;
        this.ultraMeasure = response.ultraMeasure;
        console.log(this.decimalPlace);
        console.log(this.ultraMeasure);
      });
    },
    /** 获取用户节点列表 */
    selectUserOptions() {
      selectUserOptions(this.queryParams.masterId).then(response => {
        this.currentUser = response.currentUser;
        if (this.loginUser != this.currentUser || this.status == '1') {
          this.editFlag = false;
        } else {
          this.editFlag = true;
        }
        this.contractQueryParams.user = response.currentUser;
        this.changeQueryParams.user = response.currentUser;
        this.otherQueryParams.user = response.currentUser;
        this.explain.queryParams.user = response.currentUser;
        this.queryParams.user = response.currentUser;
        this.userOptions = response.nodes;
        this.choiceList();
        // this.getExplain();
      });
    },
    // 用户下拉改变触发事件
    handleUserChange(val) {
      if (this.loginUser == this.currentUser && this.status == "0" && this.loginUser == val) {
        this.editFlag = true;
      } else {
        this.editFlag = false;
      }
      this.contractQueryParams.user = this.queryParams.user;
      this.changeQueryParams.user = this.queryParams.user;
      this.otherQueryParams.user = this.queryParams.user;
      this.explain.queryParams.user = this.queryParams.user;
      this.choiceList();
    },
    /** 搜索按钮操作 */
    handleQuery(flag) {
      this.setQueryParam();
      this.choiceList(flag);
    },
    setQueryParam() {
      // contractParams
      this.contractQueryParams.boqCode = this.queryParams.boqCode;
      this.contractQueryParams.boqName = this.queryParams.boqName;
      // changeParams
      this.changeQueryParams.boqCode = this.queryParams.boqCode;
      this.changeQueryParams.boqName = this.queryParams.boqName;
      // otherParams
      this.otherQueryParams.itemName = this.queryParams.boqName;
    },
    // 重置查询参数
    resetQueryParam() {
      this.resetForm("queryForm");
      // contractParams
      this.contractQueryParams.boqCode = null;
      this.contractQueryParams.boqName = null;
      // changeParams
      this.changeQueryParams.boqCode = null;
      this.changeQueryParams.boqName = null;
      // otherParams
      this.otherQueryParams.itemCode = null;
      this.otherQueryParams.itemName = null;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetQueryParam();
      this.handleQuery(true);
    },
    // 多选框选中数据
    handleSelectionContractChange(selection) {
      this.contractIds = selection.map(item => item.detailContractId)
      this.contractSingle = selection.length!==1
      this.contractMultiple = !selection.length
    },
    handleSelectionChangeChange(selection) {
      this.changeIds = selection.map(item => item.detailChangeId)
      this.changeSingle = selection.length!==1
      this.changeMultiple = !selection.length
    },
    handleSelectionOtherChange(selection) {
      this.otherIds = selection.map(item => item.detailOtherId)
      this.otherSingle = selection.length!==1
      this.otherMultiple = !selection.length
    },
    // 合同清单完成开关switch发生改变事触发
    completeContractChange(val) {
      if (val == "Y") {
        this.contractForm.amount = math.round(this.meterage.remainderAmount + this.beforeUpdateAmount, 6);
        this.contractForm.total = math.round(this.meterage.remainderTotal + this.beforeUpdateTotal, 6);
      } else {
        this.contractForm.amount = this.beforeUpdateAmount;
        this.contractForm.total = this.beforeUpdateTotal;
      }
    },
    // 合同数量发生变化时
    contractAmountInput(form) {
      let amount = form.amount;
      let price = form.price;
      if (amount != null && price != null) {
        form.total = math.round(amount * price, this.decimalPlace);
      }
    },
    // 变更清单完成开关switch发生改变事触发
    completeChangeChange(val) {
      if (val == "Y") {
        this.changeForm.amount = math.round(this.meterage.remainderAmount + this.beforeUpdateAmount, 6);
        this.changeForm.total = math.round(this.meterage.remainderTotal + this.beforeUpdateTotal, 6);
      } else {
        this.changeForm.amount = this.beforeUpdateAmount;
        this.changeForm.total = this.beforeUpdateTotal;
      }
    },
    // 变更数量发生变化时
    changeAmountInput(form) {
      let amount = form.amount;
      let price = form.price;
      if (amount != null && price != null) {
        form.total = math.round(amount * price, this.decimalPlace);
      }
    },
    // 表单重置
    contractReset() {
      this.contractForm = {
        detailContractId: null,
        masterId: null,
        meterageBoqCode: null,
        boqCode: null,
        boqName: null,
        ancestors: null,
        orderNum: null,
        unit: null,
        price: null,
        amount: null,
        total: null,
        beginStation: null,
        endStation: null,
        place: null,
        item: null,
        formula: null,
        blueprint: null,
        certificateNo: null,
        isEdit: null,
        complete: null,
        annexUuid: null,
        dept: null,
        deptName: null,
        user: null,
        userName: null
      };
      this.resetForm("contractForm");
    },
    changeReset() {
      this.changeForm = {
        detailChangeId: null,
        masterId: null,
        meterageBoqCode: null,
        boqCode: null,
        boqName: null,
        ancestors: null,
        orderNum: null,
        unit: null,
        price: null,
        amount: null,
        total: null,
        beginStation: null,
        endStation: null,
        place: null,
        item: null,
        formula: null,
        blueprint: null,
        certificateNo: null,
        isEdit: null,
        complete: null,
        annexUuid: null,
        dept: null,
        deptName: null,
        user: null,
        userName: null
      };
      this.resetForm("changeForm");
    },
    otherReset() {
      this.otherForm = {
        detailOtherId: null,
        masterId: null,
        itemName: null,
        itemCode: null,
        itemOrder: null,
        total: null,
        isEdit: null,
        annexUuid: null,
        remark: null,
        dept: null,
        deptName: null,
        user: null,
        userName: null
      };
      this.resetForm("otherForm");
    },
    explainReset() {
      this.explain.form = {
        detailExplainId: null,
        masterId: null,
        reason: null,
        content: null,
        dept: null,
        deptName: null,
        user: null,
        userName: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      }
    },
    copyRest() {
      this.copyForm = {
        detailContractId: null,
        amount: null
      }
    },
    // 打开选择合同清单窗口
    openSelectContractMeterage() {
      this.$refs.selectContract.show();
    },
    // 打开选择变更清单窗口
    openSelectChangeMeterage() {
      this.$refs.selectChange.show();
    },
    // 查询合同清单列表
    getContractList() {
      this.loading = true;
      listDetailContract(this.contractQueryParams).then(response => {
        this.detailContractList = response.rows;
        this.contractTotal = response.total;
        this.loading = false;
      });
    },
    // 查询变更清单列表
    getChangeList() {
      this.loading = true;
      listDetailChange(this.changeQueryParams).then(response => {
        this.detailChangeList = response.rows;
        this.changeTotal = response.total;
        this.loading = false;
      });
    },
    // 查询其他支付项目列表
    getOtherList() {
      this.loading = true;
      listDetailOther(this.otherQueryParams).then(response => {
        this.detailOtherList = response.rows;
        this.otherTotal = response.total;
        this.loading = false;
      });
    },
    // 查询填报说明内容
    getExplain() {
      this.explainReset();
      this.loading = true;
      getDetailExplain(this.explain.queryParams).then(response => {
        this.explain.form = response.data;
        this.loading = false;
      });
    },
    // 同步支付项目按钮
    handleSyncItem() {
      this.$modal.confirm('同步支付项目将会删除原有数据和相关附件，确定执行该操作？').then(() => {
        return syncDetailItem(this.otherQueryParams.masterId);
      }).then(() => {
        this.$modal.msgSuccess("操作成功");
        this.choiceList();
      }).catch(() => {});
    },
    // 预览合同清单按钮操作
    handleViewContract(row) {
      this.contractReset();
      const detailContractId = row.detailContractId || this.contractIds;
      getDetailContract(detailContractId).then(response => {
        this.contractForm = response.detail;
        this.contractBrowseOpen = true;
        this.contractBrowseTitle = "合同清单详情预览";
      });
    },
    /** 修改合同清单按钮操作 */
    handleUpdateContract(row) {
      this.contractReset();
      this.meterage = null;
      this.contentAmount = "";
      this.contentTotal = "";
      const detailContractId = row.detailContractId || this.contractIds;
      getDetailContract(detailContractId).then(response => {
        this.contractForm = response.detail;
        this.meterage = response.meterage;
        // 修改前的值
        if (response.detail.amount != null) {
          this.beforeUpdateAmount = response.detail.amount;
          this.beforeUpdateTotal = response.detail.total;
        } else {
          this.beforeUpdateAmount = 0;
          this.beforeUpdateTotal = 0;
        }
        this.contentAmount = `合同数量：${this.meterage.amount},
        已计量数量：${math.round(this.meterage.alreadyAmount - this.beforeUpdateAmount, 6)},
        剩余数量：${math.round(this.meterage.remainderAmount + this.beforeUpdateAmount, 6)}`;
        this.contentTotal = `合同金额：${this.meterage.total},
        已计量金额：${math.round(this.meterage.alreadyTotal - this.beforeUpdateTotal, 6)},
        剩余金额：${math.round(this.meterage.remainderTotal + this.beforeUpdateTotal, 6)}`;
        this.contractOpen = true;
        this.contractTitle = "合同清单详情修改";
      });
    },
    // 预览变更清单按钮操作
    handleViewChange(row) {
      this.changeReset();
      const detailChangeId = row.detailChangeId || this.changeIds;
      getDetailChange(detailChangeId).then(response => {
        this.changeForm = response.detail;
        this.changeBrowseOpen = true;
        this.changeBrowseTitle = "变更清单详情预览";
      });
    },
    // 复制合同清单按钮操作
    handleCopy() {
      this.copyRest();
      const detailContractId = this.contractIds[0];
      let title = "复制清单";
      for (let i = 0; i < this.detailContractList.length; i++) {
        let detail = this.detailContractList[i];
        if (detailContractId == detail.detailContractId) {
          title = title + detail.boqCode;
          break;
        }
      }
      this.copyForm.detailContractId = detailContractId;
      this.copyOpen = true;
      this.copyTitle = title;
    },
    copySubmitForm() {
      this.$refs["copyForm"].validate(valid => {
          if (valid) {
            copy(this.copyForm).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.copyOpen = false;
              this.choiceList()
            });
          }
      });
    },
    /** 修改变更清单按钮操作 */
    handleUpdateChange(row) {
      this.changeReset();
      this.meterage = null;
      this.contentAmount = "";
      this.contentTotal = "";
      const detailChangeId = row.detailChangeId || this.changeIds;
      getDetailChange(detailChangeId).then(response => {
        this.changeForm = response.detail;
        this.meterage = response.meterage;
        // 修改前的值
        if (response.detail.amount != null) {
          this.beforeUpdateAmount = response.detail.amount;
        } else {
          this.beforeUpdateAmount = 0;
        }
        this.contentAmount = `合同数量：${this.meterage.amount},
        已计量数量：${math.round(this.meterage.alreadyAmount - this.beforeUpdateAmount)},
        剩余数量：${math.round(this.meterage.remainderAmount + this.beforeUpdateAmount)}`;
        this.contentTotal = `合同金额：${this.meterage.total},
        已计量金额：${math.round(this.meterage.alreadyTotal - this.beforeUpdateTotal)},
        剩余金额：${math.round(this.meterage.remainderTotal + this.beforeUpdateTotal)}`;
        this.changeOpen = true;
        this.changeTitle = "变更清单详情修改";
      });
    },
    /** 修改其他支付项目按钮操作 */
    handleUpdateOther(row) {
      this.otherReset();
      const detailOtherId = row.detailOtherId || this.otherIds;
      getDetailOther(detailOtherId).then(response => {
        this.otherForm = response.data;
        this.otherOpen = true;
        this.otherTitle = "其他支付项目详情修改";
      });
    },
    /** 合同清单提交按钮 */
    contractSubmitForm() {
      this.$refs["contractForm"].validate(valid => {
        if (valid) {
          if (this.contractForm.detailContractId != null) {
            updateDetailContract(this.contractForm).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.contractOpen = false;
              this.choiceList()
            });
          }
        }
      });
    },
    /** 变更清单提交按钮 */
    changeSubmitForm() {
      this.$refs["changeForm"].validate(valid => {
        if (valid) {
          if (this.changeForm.detailChangeId != null) {
            updateDetailChange(this.changeForm).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.changeOpen = false;
              this.choiceList()
            });
          }
        }
      });
    },
    /** 其他支付项目提交按钮 */
    otherSubmitForm() {
      this.$refs["otherForm"].validate(valid => {
        if (valid) {
          if (this.otherForm.detailOtherId != null) {
            updateDetailOther(this.otherForm).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.otherOpen = false;
              this.choiceList()
            });
          }
        }
      });
    },
    /** 填报说明提交按钮 */
    explainSubmitForm() {
      this.$refs["explainForm"].validate(valid => {
        if (valid) {
            updateDetailExplain(this.explain.form).then(response => {
              this.$modal.msgSuccess("操作成功");
            });
        }
      });
    },
    // 取消按钮
    contractCancel() {
      this.contractOpen = false;
      this.contractReset();
    },
    changeCancel() {
      this.changeOpen = false;
      this.changeReset();
    },
    otherCancel() {
      this.otherOpen = false;
      this.otherReset();
    },
    explainCancel() {
      this.getExplain();
    },
    copyCancel() {
      this.copyOpen = false;
      this.copyRest();
    },
    // 合同清单删除按钮操作
    handleDeleteContract(row) {
      const detailContractIds = row.detailContractId || this.contractIds;
      this.$modal.confirm('确认删除选中的数据项？').then(function() {
        return delDetailContract(detailContractIds);
      }).then(() => {
        this.choiceList();
        this.$modal.msgSuccess("操作成功");
      }).catch(() => {});
    },
    // 变更清单删除按钮操作
    handleDeleteChange(row) {
      const detailChangeIds = row.detailChangeId || this.changeIds;
      this.$modal.confirm('确认删除选中的数据项？').then(function() {
        return delDetailChange(detailChangeIds);
      }).then(() => {
        this.choiceList();
        this.$modal.msgSuccess("操作成功");
      }).catch(() => {});
    },
    /** 草图按钮操作 */
    handleSketch(row, type) {
      this.$refs.sketch.show(row.annexUuid, this.queryParams.masterId, this.editFlag, type);
    },
    /** 附件按钮操作 */
    handleAnnex(row, type) {
      this.$refs.annex.show(row.annexUuid, this.queryParams.masterId, this.editFlag, type);
    },
    // 禁止输入e
    handleKey(e) {
      let key = e.key
      // 不允许输入'e'
      if (key === 'e') {
        e.returnValue = false
        return false
      }
      return true
    },

  }
};
</script>

<style lang="scss">
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type='number'] {
    -moz-appearance: textfield;
  }
</style>
